<!-- 全部订单 -->
<template>
	<view class="bodyOuter-Container">

		<!-- header部分 -->
		<view class='header-Container header-height'>
			<view class="header-bg"></view>
			<navHeader pageTitle="全部订单" rightBtnType="msgCenter" colorTheme="white" @toggleMenuListHandler="toggleMenuListHandler">
			</navHeader>
		</view>

		<!-- 订单分类 -->
		<view class="navbar headerNext">
			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{current: orderStatus == item.orderStatus}"
			 @click="tabClick(index)">
				{{item.text}}
			</view>
		</view>
		<view style="width: 100%; height: 80rpx;"></view>


		<!-- 订单列表 -->
		<scroll-view v-if="orderList && orderList.length" scroll-y="true" @scrolltolower="scrolltolower" class="orderList-Container">
			<view v-for="(item,index) in orderList" :key="index" class="order-item">
				<view class="i-top">
					<image class="shopIcon" :src="icon.shopIcon"></image>
					<text class="shopName">{{item.venderNames.split(",")[0]}}</text>

					<text class="state" :style="{color: item.stateTipColor}">
						{{item | orderStatusName}}
					</text>
				</view>

				<!-- 大于1件时 -->
				<view v-if="item.goodsBaseInfos.length > 1">
					<view @click="gotoOrderDetailPage(item.orderParentId, item.orderIds)" class="goods-box" scroll-x>
						<view v-for="(goodsItem, goodsIndex) in item.goodsBaseInfos" :key="goodsIndex" class="goods-item" :class="{ hiddenGoods: goodsIndex >= 3}">
							<image class="goods-img" :src="imgSite +  goodsItem.coverPicture" mode="aspectFill"></image>
						</view>

						<view class="goodsCount">
							<view class="count">
								共{{item.goodsBaseInfos.length}}件
							</view>
							<image class="rightBtn" :src="icon.rightBtn" mode=""></image>
						</view>
					</view>
				</view>


				<!-- 只有1件时 -->
				<view v-if="item.goodsBaseInfos.length == 1">
					<view class="goods-box-single borderOneRpx" v-for="(goodsItem, goodsIndex) in item.goodsBaseInfos" :key="goodsIndex"
					 @click="gotoOrderDetailPage(item.orderParentId, item.orderIds)">

						<view class="poster-Container">
							<image class="goods-img" :src="imgSite + goodsItem.coverPicture" mode="aspectFill"></image>

							<!-- 拼团 -->
							<view v-if="item.orderType == '20'" class="preGroup-NUM">
								拼团预售·{{item.groupCount}}人拼
							</view>
						</view>

						<view class="right">
							<view class="title ellipsis2">
								{{goodsItem.goodsName}}
							</view>
							<view class="specPrice">
								<view class="attr-box ellipsis1">
									{{goodsItem.goodsSpec}}
								</view>
								<view class="price">
									<text>¥{{ goodsItem.price / 100 }}</text>
									<!-- <text v-if="goodsItem.points">+{{ goodsItem.points }}积分</text> -->
									<!-- <text v-if="goodsItem.waters">+{{ goodsItem.waters / 100 }}水券</text> -->
								</view>
							</view>
							<view class="buyNum">
								<view v-if="item.orderType == '20'" class="preGroup">
									预计{{item.groupFhDate}}发货
								</view>
								<view class="NUM">
									x{{goodsItem.count}}
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="price-box" v-if="item.orderFinalStatus != '06' && item.orderFinalStatus != '09'">
					<text>
						实付款：
						<text class="price">{{item.totalCount / 100}}</text>
					</text>

					<text v-if="item.advFlag == 1" style="margin-left: 20rpx;">
						定金：
						<text class="price">{{item.advAmount / 100}}</text>
					</text>
				</view>


				<!-- 订单状态-01：全部 02：待付款 03：待发货 04：待收货 05:待评价 06:已取消 08：已完成 09：待成团 -->
				<!-- 拼团订单 -->
				<view v-if="item.orderFinalStatus == '09'" class="preGroupStatus-Container">

					<!-- groupStatus 0：小团未成 1：小团已成 -->
					<view v-if="item.groupStatus == 0" class="preGroupStatus">
						<view class="preGroupOperate">
							<view class="lefter">
								邀请好友组队，达到{{item.groupCount}}人才成功拼团预定
							</view>
							<view @click="inviteFriendHandler(item)" class="righter">
								邀请好友
							</view>
						</view>
					</view>
					<view v-else-if="item.groupStatus == 1" class="preGroupStatus">

						<!-- 一次支付 -->
						<view v-if="item.advFlag == 0" class="preGroupOperate">
							<view class="lefter">
								组队成功，商品拼团预售进行中，请等待店铺预售截止。
							</view>
						</view>

						<!-- 定金尾款 -->
						<view v-if="item.advFlag == 1" class="preGroupOperate">
							<block v-if="item.payFinalFlag == true && item.finalAmountStatus == 0">
								<view class="lefter">
									商品拼团预售成功，请支付尾款。
								</view>
								<view @click="gotoPayPage(item.orderParentId, item.finalAmount, item.orderIds, true, item.activityMainId, item.activityGroupId)"
								 class="righter">
									支付尾款
								</view>
							</block>
							<block v-else>
								<view class="lefter">
									组队成功，商品拼团预售进行中，请等待店铺预售截止。
								</view>
							</block>
						</view>
					</view>
				</view>
				<view v-else class="action-box">
					<block v-if="item.orderFinalStatus == '02'">
						<button class="action-btn" @click="cancelOrder(item.orderParentId, item.orderId)">取消订单</button>
						<block v-if="item.orderType == 20">
							<button v-if="item.advFlag == 0" class="action-btn recom" @click="gotoPayPage(item.orderParentId, item.totalCount, item.orderIds, true, item.activityMainId, item.activityGroupId)">去支付</button>
							<button v-if="item.advFlag == 1" class="action-btn recom" @click="gotoPayPage(item.orderParentId, item.advAmount, item.orderIds, true, item.activityMainId, item.activityGroupId)">去支付</button>
						</block>
						<button v-else class="action-btn recom" @click="gotoPayPage(item.orderParentId, item.totalCount, item.orderIds)">去支付</button>
					</block>
					<block v-if="item.orderFinalStatus == '04'">
						<button class="action-btn" @click="getLogistical(item.orderId)">查看物流</button>
						<button class="action-btn" @click="confirmOrder(item.orderId)">确认收货</button>
					</block>
					<block v-if="item.orderFinalStatus == '05' || item.orderFinalStatus == '08'">
						<button v-if="!item.orderEvaluate" class="action-btn" @click="gotoEvaluatePage(item.orderId)">评价晒单</button>
						<button v-if="item.orderSale && item.crossBorderFlag != 1" class="action-btn" @click="gotoAfterSalePage(item.orderId)">申请售后</button>

						<!-- 10:普通订单 20：团购 40：砍价 -->
						<button v-if="item.orderType != 20 && item.orderType != 40" class="action-btn" @click="gotoCartPage(item)">再次购买</button>
					</block>
					<block v-if="item.orderFinalStatus == '08'">
						<button class="action-btn" @click="deleteOrder(item.orderId)">删除订单</button>
					</block>
				</view>
			</view>
		</scroll-view>
		<view v-else>
			<g-empty></g-empty>
		</view>


		<!-- 支付密码 -->
		<view v-if="showPayPassFlag" class="payPassBg-Container">
			<view class="setPass-Container">
				<view class="modalTitle">
					请输入支付密码
				</view>

				<!-- 关闭弹窗 -->
				<image @click="closePayModalHandler" :src="icon.closeModalBtn" class="closeModalBtn"></image>

				<view @tap="showFun" class="content">
					<view class="passwordBg-Container">
						<image class="password-bg" :src="icon.password" mode=""></image>
					</view>

					<view v-for="(item, index) in 6" :key="item" class="password-item">
						{{password[index] ? '●' :''}}
					</view>
				</view>

				<view class="forgetPass-Container">
					<view class="forgetPass">
						<view @click="gotoPayPassPage()">
							忘记密码？
						</view>
					</view>
				</view>

				<view class="confirmPayOuter-Container">
					<view @click="confirmPayHandler()" class="confirmPay-Container">
						确认支付
					</view>
				</view>
			</view>
			<pay-keyboard :show_key="show_key" @hideFun="hideFun" @getPassword="getPassword"></pay-keyboard>
		</view>


		<!-- 详情菜单 -->
		<view v-if="showDetailMenu" @click="toggleMenuListHandler()" class="detailMenu-Container">
			<detailMenu></detailMenu>
		</view>


		<!-- 邀请好友 -->
		<view v-if="showInviteFriendFlag" class="inviteFriend-OutContainer">
			<view class="inviteFriend">
				<view class="dialogTitle">
					邀请好友参与拼团
				</view>
				<view class="tipsText">
					<view>还差<view class="numGroup">{{needNum}}人</view>，距结束
						<view class="endDt-Container">
							<view class="timeText">
								<uni-countdown color="#666666" background-color="#FFFFFF" border-color="#FFFFFF" :show-day="true" :day="countDownDay"
								 :hour="countDownHour" :minute="countDownMinute" :second="countDownSeconds"></uni-countdown>
							</view>
						</view>
					</view>
				</view>
				<view class="groupUsers">
					<image class="groupedUser" :src="imgSite + userInfo.headSculpture"></image>
					<view class="waitingUser">
						?
					</view>
				</view>
				<view @click="userShareHandler()" class="iKnowBtn">
					邀请好友
				</view>

				<image @click="closeInviteFriendView()" class="closeModalBtn" :src="icon.closeModalBtn"></image>
			</view>
		</view>


		<!-- 分享 -->
		<uni-popup ref="showpopup" :type="type" style="z-index: 100;">
			<view class="share">
				<view class="title-name flex-all-center">
					<image :src="icon.left"></image>
					分享到
					<image :src="icon.right"></image>
				</view>
				<view class="icons flex-rwo-around">

					<view class="icon-block flex-all-center">
						<image :src="icon.weixin" @click="share('0')"></image>
						<text>微信好友</text>
					</view>
					<view class="icon-block flex-all-center">
						<image :src="icon.pengyouquan" @click="share('1')"></image>
						<text>朋友圈</text>
					</view>
					<!--<view class="icon-block flex-all-center">
						<image :src="icon.weibo" @click="share('2')"></image>
						<text>微博</text>
					</view>-->
				</view>
				<view class="cancel" @click="cancel()">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';

	import uniCountdown from '@/components/uni-countdown/uni-countdown';

	import navHeader from '@/components/nav-header/nav-header';
	import detailMenu from "@/components/detailMenu/detailMenu";
	import payKeyboard from '@/components/keyboard/keyboard';

	export default {
		components: {
			uniCountdown,

			navHeader,
			detailMenu,
			payKeyboard
		},
		filters: {

			//01：全部 02：待付款 03：待发货 04：待收货 05:待评价 06:已取消 07:已退款 08：已完成 09：待成团
			orderStatusName: function(item) {
				return {
					"01": "全部",
					"02": "待付款",
					"03": "待发货",
					"04": "待收货",
					"05": "待评价",
					"06": "已取消",
					"07": "已退款",
					"08": "已完成",
					"09": "拼团预售-待成团"
				} [item.orderFinalStatus];
			}
		},
		computed: {
			...mapState(['imgSite', 'hasLogin', 'url'])
		},
		data() {
			return {

				icon: {
					headerBg: '/static/images/common/header.png',
					searchBtn: "/static/images/order/search.png",
					menuBtn: "/static/images/order/menu.png",
					shopIcon: "/static/images/order/shop.png",
					rightBtn: "/static/images/common/rightBtn.png",
					password: "/static/images/order/pay/password.png",
					closeModalBtn: "/static/images/common/closeModal.png",

					left: "/static/images/detail/left.png",
					right: "/static/images/detail/right.png",
					weixin: "/static/images/detail/wechat.png",
					weibo: "/static/images/detail/weibo.png",
					pengyouquan: "/static/images/detail/pengyouquan.png",
				},
				type: 'bottom',

				//详情菜单
				showDetailMenu: false,

				//订单状态
				orderStatus: "01",
				tabCurrentIndex: 0,
				// 订单状态-01：全部 02：待付款 03：待发货 04：待收货 05:待评价 06:已取消 08：已完成 09：待成团
				navList: [{
						orderStatus: "01",
						text: '全部',
						loadingType: 'more',
						orderList: []
					},
					{
						orderStatus: "02",
						text: '待付款',
						loadingType: 'more',
						orderList: []
					},
					{
						orderStatus: "04",
						text: '待收货',
						loadingType: 'more',
						orderList: []
					},
					{
						orderStatus: "08",
						text: '已完成',
						loadingType: 'more',
						orderList: []
					},
					{
						orderStatus: "06",
						text: '已取消',
						loadingType: 'more',
						orderList: []
					}
				],

				orderList: [],
				orderListCount: false,

				//分页相关
				pageNum: 1,
				pageSize: 10,


				//支付密码
				showPayPassFlag: false,
				show_key: false,
				password: '',

				orderData: {},


				//邀请好友
				userInfo: {},
				needNum: 0,
				groupSpu: "",
				shareGroupInfo: {},
				showInviteFriendFlag: false,

				countDownDay: 0,
				countDownHour: 0,
				countDownMinute: 0,
				countDownSeconds: 0
			};
		},
		onShow() {
			this.showDetailMenu = false;
			this.groupSpu = "";
			this.showPayPassFlag = false;
			this.password = "";
			this.showInviteFriendFlag = false;

			var orderStatus = uni.getStorageSync("orderStatus");

			var that = this;
			that.orderStatus = orderStatus || "01";
			that.pageNum = 1;

			if (!this.hasLogin) {
				uni.navigateTo({
					url: '/pagesUser/login/userLogin'
				});
			} else {
				//订单列表
				this.getOrderList();

				//用户信息
				that.$api.globalUtil.getUserInfo(that, function(res) {
					that.userInfo = res.data.response;
				});
			}
		},
		methods: {
			scrolltolower() {
				console.log("scrolltolower", this.orderListCount)
				if (!this.orderList.length) return;
				if (this.orderListCount) return;
				this.pageNum += 1
				this.getOrderList()
			},
			//详情菜单
			toggleMenuListHandler() {
				this.showDetailMenu = !this.showDetailMenu;
			},


			//获取订单列表
			getOrderList() {
				this.$api.showLoading()
				var that = this;
				that.$api.globalUtil.requestAjax({
					url: '/OrderApi/getOrdersForApi',
					method: "POST",
					data: {
						orderFinalStatus: that.orderStatus || "01",
						pageNum: that.pageNum,
						pageSize: that.pageSize
					},
					success: function(res) {
						if (res.data.success) {
							if (that.pageNum == 1) {
								that.orderList = [];
							}
							
							if (res.data.response.results && res.data.response.results.length) {
that.orderListCount = res.data.response.results.length < that.pageSize
								//商品图片&名称
								for (var i = 0; i < res.data.response.results.length; i++) {
									for (var j = 0; j < res.data.response.results[i].goodsBaseInfos.length; j++) {

										var item = res.data.response.results[i].goodsBaseInfos[j];
										var info = JSON.parse(item.goodsBaseInfo);

										item.coverPicture = info['coverPicture'];
										item.goodsName = info['goodsName'];

										//已选规格
										var goodsSpec = '';
										var goodsJson = JSON.parse(info["attributes"]["goodsCategoryAttr"]);
										for (var k = 0; k < goodsJson.length; k++) {
											goodsSpec += (goodsJson[k]["value"] + ' ');
										}
										item.goodsSpec = goodsSpec;
									}
								}

								if (that.pageNum == 1) {
									that.orderList = res.data.response.results;
								} else {
									that.orderList = that.orderList.concat(res.data.response.results);
								}
							} else {
								if (that.pageNum != 1) {
									that.orderListCount = true
									that.$api.msg("没有更多订单了!");
								}
							}
						}
					},
					complate: () => (uni.stopPullDownRefresh(), this.$api.hideLoading())
				});
			},


			// goto订单详情
			gotoOrderDetailPage(orderParentId, orderIds) {
				uni.navigateTo({
					url: '/pagesOrder/orderDetail?orderParentId=' + orderParentId + '&orderIds=' + orderIds
				});
			},


			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
				this.orderStatus = this.navList[index].orderStatus;
				uni.setStorageSync("orderStatus", this.orderStatus);
				this.pageNum = 1;
				this.orderList = [];
				this.getOrderList();
				this.orderListCount = false
			},


			//删除订单
			deleteOrder(orderId) {

				var that = this;
				uni.showModal({
					content: '确认删除订单？',
					confirmText: '确认',
					cancelText: '取消',
					success(res) {
						if (res.confirm) {

							that.$api.globalUtil.requestAjax({
								url: "/OrderApi/delOrderForApi",
								method: "POST",
								data: {
									orderId: orderId
								},
								success: function(res) {
									if (res.data.success) {
										that.$api.msg("删除订单成功!");
										setTimeout(function() {
											that.pageNum = 1;
											that.getOrderList();
										}, 1500);
									}
								}
							});
						}
					}
				})
			},


			//取消订单
			cancelOrder(orderParentId, orderIds) {

				var that = this;
				uni.showModal({
					content: '确认取消订单？',
					confirmText: '确认',
					cancelText: '取消',
					success(res) {
						if (res.confirm) {

							that.$api.globalUtil.requestAjax({
								url: "/OrderApi/cancelOrderForApi",
								method: "POST",
								data: {
									orderParentId: orderParentId,
									orderIds: orderIds
								},
								success: function(res) {
									if (res.data.success) {
										that.$api.msg("取消订单成功!");
										setTimeout(function() {
											that.pageNum = 1;
											that.getOrderList();
										}, 1500);
									}
								}
							});
						}
					}
				})
			},


			/**
			 * 确认收货
			 */
			confirmOrder(orderId) {

				var that = this;
				uni.showModal({
					content: '确认收货？',
					confirmText: '确认',
					cancelText: '取消',
					success(res) {
						if (res.confirm) {

							that.$api.globalUtil.requestAjax({
								url: "/OrderLogisticsApi/updateOrderLogisticsForApi",
								method: "POST",
								data: {
									orderId: orderId,
									status: 20
								},
								success: function(res) {
									if (res.data.success) {
										that.$api.msg("确认收货成功!");
										setTimeout(function() {
											that.pageNum = 1;
											that.getOrderList();
										}, 1500);
									}
								}
							});
						}
					}
				})
			},


			//查看物流
			getLogistical(orderId) {
				uni.navigateTo({
					url: '/pagesOrder/logistical?orderId=' + orderId
				});
			},


			// 评价晒单
			gotoEvaluatePage(orderId) {
				uni.navigateTo({
					url: '/pagesGoods/evaluate/evaluate?orderId=' + orderId
				})
			},


			// 申请售后
			gotoAfterSalePage(orderId) {
				uni.navigateTo({
					url: '/pagesGoods/afterSale/afterSale?orderId=' + orderId
				});
			},


			// 再次购买
			gotoCartPage(item) {

				let that = this;
				var url = "";
				var addFlag = 0;
				var addChannel = 0; //10:PC 20:WAP 30:APP 40：小程序

				// #ifdef H5
				addChannel = 20;
				// #endif
				// #ifdef APP-PLUS
				addChannel = 30;
				// #endif
				// #ifdef MP-WEIXIN
				addChannel = 40;
				// #endif


				//加入购物车
				addFlag = 10;
				url = "/ShopCartApi/addShopCartForApi";

				var goodsId = "";
				var activityId = "";
				var buyCount = 0;
				var shopCartForms = [];
				for (var i = 0; i < item.goodsBaseInfos.length; i++) {
					goodsId = item.goodsBaseInfos[i].goodsId;
					activityId = item.goodsBaseInfos[i].activityId;
					buyCount = item.goodsBaseInfos[i].count;

					shopCartForms.push({
						goodsId: goodsId, //商品SKU
						// shopId: item.venderIds, //店铺id
						activityId: activityId, //活动id
						num: buyCount, //加入数量
						addChannel: addChannel, //加入渠道 10:PC 20:WAP 30:APP 40：小程序
						addFlag: addFlag //加入标识 10:加入购物车 20:立即购买
					});
				}


				that.$api.globalUtil.requestAjax({
					url: url,
					method: "POST",
					data: {
						shopCartForms: shopCartForms
					},
					success: function(res) {
						if (res.data.success) {
							uni.switchTab({
								url: '/pages/cart/cart'
							});
						}
					}
				});
			},


			// 去支付
			gotoPayPage(orderParentId, payAmount, orderIds, groupFlag, activityMainId, activityGroupId) {

				if (groupFlag) {

					var that = this;
					that.$api.globalUtil.requestAjax({
						url: "/OrderApi/verifyGroupOrderForApi",
						method: "POST",
						data: {
							orderParentId: orderParentId,
							activityGroupMainId: activityMainId,
							activityGroupId: activityGroupId
						},
						success: function(res) {
							if (res.data.success) {

								var orderData = {
									orderParentId: orderParentId,
									orderIds: orderIds,
									payAmount: payAmount
								};
								that.orderData = orderData;

								//订单支付流程
								that.payProcessHandler(orderData);
							}
						},
					});
				} else {

					var orderData = {
						orderParentId: orderParentId,
						orderIds: orderIds,
						payAmount: payAmount
					};
					this.orderData = orderData;

					//订单支付流程
					this.payProcessHandler(orderData);
				}
			},


			//订单支付流程
			payProcessHandler(orderData) {

				var that = this;
				if (orderData.payAmount == 0) {

					//是否设置了支付密码
					that.getIfOrNotSetedPayPass();
				} else {
					uni.navigateTo({
						url: '/pagesOrder/pay?orderParentId=' + orderData.orderParentId + '&orderPayAmount=' + orderData.payAmount +
							'&orderIds=' + orderData.orderIds
					});
				}
			},


			//忘记密码
			gotoPayPassPage() {
				uni.navigateTo({
					url: '/pagesUser/payPass'
				});
			},


			//是否设置了支付密码
			getIfOrNotSetedPayPass() {

				var that = this;
				that.$api.globalUtil.requestAjax({
					url: "/CustomerApi/findCustomerByCustomerIdForApi",
					method: "POST",
					success: function(res) {
						if (res.data.success) {
							if (res.data.response.boundPayPwd) {
								that.showPayPassFlag = true;
							} else {
								that.$api.msg("请设置支付密码");
								setTimeout(function() {
									uni.navigateTo({
										url: '/pagesUser/payPass'
									});
								}, 2000);
							}
						}
					}
				});
			},


			//支付密码数字弹窗
			closePayModalHandler() {
				this.showPayPassFlag = false;
				this.$api.msg("取消支付");
			},
			showFun() {
				this.show_key = true;
			},
			hideFun() {
				this.show_key = false;
			},
			getPassword(n) {
				this.password = n;
			},


			// 确认支付
			confirmPayHandler() {

				//余额支付
				this.amountBalancePay();
			},


			// 账户余额支付
			amountBalancePay() {

				var that = this;
				that.$api.globalUtil.requestAjax({
					url: "/PayApi/payForApi",
					method: "POST",
					data: {
						orderParentId: that.orderData.orderParentId,
						orderIds: that.orderData.orderIds,
						payPassword: that.password
					},
					success: function(res) {
						if (res.data.success) {
							that.$api.msg("支付成功");
							that.showPayPassFlag = false;

							setTimeout(function() {
								that.pageNum = 1;
								that.getOrderList();
							}, 2000);
						}
					}
				});
			},


			//邀请好友
			inviteFriendHandler(item) {

				var that = this;

				that.groupSpu = item.goodsBaseInfos[0].goodsCd;
				that.needNum = item.needNum;


				that.shareGroupInfo = {
					nickName: that.userInfo.nickName,
					headSculpture: that.userInfo.headSculpture,
					needNum: that.needNum,
					activityMainId: item.activityMainId,
					activityGroupId: item.activityGroupId,
					activityEndTime: item.activityEndTime,
					goodsId: item.goodsBaseInfos[0].goodsId,
					vendorId: item.venderIds,
					activityId: item.goodsBaseInfos[0].activityId
				};

				var countDown = that.$api.globalUtil.startTimeFormate(item.activityEndTime);
				that.countDownDay = countDown['day'];
				that.countDownHour = countDown['hour'];
				that.countDownMinute = countDown['minute'];
				that.countDownSeconds = countDown['seconds'];

				that.showInviteFriendFlag = true;
			},
			closeInviteFriendView() {
				this.shareGroupInfo = null;
				this.groupSpu = "";
				this.showInviteFriendFlag = false;
			},


			// 弹窗分享
			userHasLoginFilter(callBack) {
				if (!this.hasLogin) {
					uni.navigateTo({
						url: '/pagesUser/login/userLogin'
					});
				} else {
					callBack();
				}
			},
			userShareHandler() {

				var that = this;
				that.userHasLoginFilter(function() {

					// #ifdef H5 || MP-WEIXIN
					uni.setClipboardData({
						data: encodeURI(that.url + "#/pages/detail/preGroup?id=" + that.groupSpu + "&shareGroupInfo=" + JSON.stringify(
							that.shareGroupInfo)),
						success: function(data) {
							uni.showToast({
								title: '您的分享链接已复制到您的粘贴板，',
								icon: 'none'
							});
						},
						fail: function(err) {},
						complete: function(res) {}
					});
					// #endif

					// #ifdef APP-PLUS
					that.$nextTick(() => {
						that.$refs['showpopup'].open();
					});
					// #endif
				});
			},
			// 关闭分享弹窗
			cancel() {
				this.$refs['showpopup'].close();
			},
			// 分享
			share(e) {

				let that = this;
				console.log(that.url + "#/pages/detail/preGroup?id=" + that.groupSpu + "&shareGroupInfo=" + JSON.stringify(that.shareGroupInfo));

				if (e == '0') {
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 0,
						href: that.url + "#/pages/detail/preGroup?id=" + that.groupSpu + "&shareGroupInfo=" + JSON.stringify(that.shareGroupInfo),
						title: "构购",
						summary: "我正在构购电商平台, 快来查看",
						imageUrl: that.imgSite + '/s/20210125/37jodmjvvwuk.png',
						success: function(res) {
							that.luckShareRecord();
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});

				} else if (e == '1') {

					uni.share({
						provider: "weixin",
						scene: "WXSenceTimeline",
						type: 0,
						href: that.url + "#/pages/detail/preGroup?id=" + that.groupSpu + "&shareGroupInfo=" + JSON.stringify(that.shareGroupInfo),
						title: "构购",
						summary: "我正在构购电商平台, 快来查看",
						imageUrl: that.imgSite + '/s/20210125/37jodmjvvwuk.png',
						success: function(res) {
							that.luckShareRecord();
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				} else if (e == '2') {

					uni.share({
						provider: "sinaweibo",
						type: 0,
						href: that.url + "#/pages/detail/preGroup?id=" + that.groupSpu + "&shareGroupInfo=" + JSON.stringify(that.shareGroupInfo),
						title: "构购",
						summary: "我正在构购电商平台, 快来查看",
						imageUrl: that.imgSite + '/s/20210125/37jodmjvvwuk.png',
						success: function(res) {
							that.luckShareRecord();
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				}
			},
			// 关闭弹窗
			closeModalHandler() {
				this.showCouponModal = false;
				this.showSpecModal = false;
			}
		}
	}
</script>

<style lang="scss">
	page,
	.bodyOuter-Container {
		background: #F5F5F5;
		min-height: 100%;
		// padding-bottom: 20rpx;

		// header部分
		.header-Container {
			// position: fixed;
			// top: 0;

			width: 100%;
			height: 176rpx;
			overflow: hidden;
			// box-shadow: 0px 1rpx 1rpx 0px rgba(0, 0, 0, 0.08);
			background: rgba(255, 255, 255, 1);

			.header-bg {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: #FE5E49;
				z-index: 1;
			}

			.bg {
				position: absolute;
				top: 0;
				margin: 0;
				width: 100%;
				height: 100%;
			}

			.leftBtns {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 86rpx;

				.back {
					margin-left: 17rpx;
					width: 44rpx;
					height: 44rpx;
				}
			}

			.title {
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 86rpx;
				line-height: 86rpx;
				text-align: center;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
			}
		}
	}


	.navbar {
		position: fixed;
		display: flex;
		width: 100%;
		height: 80rpx;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0, 0, 0, .06);
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			height: 100%;
			font-size: 26rpx;
			font-family: PingFang SC;
			// font-weight:500;
			color: rgba(102, 102, 102, 1);

			&.current {
				color: #333333;
				font-weight: bold;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 12rpx;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					width: 50rpx;
					height: 4rpx;
					background: #FE5E49;
					border-radius: 2rpx;
				}
			}
		}
	}

	.orderList-Container {
		/* #ifndef APP-PLUS */
		height: calc(100vh - 88rpx - 80rpx) !important;
		/* #endif */
		/* #ifdef APP-PLUS */
		height: calc(100vh - 176rpx - 80rpx) !important;
		/* #endif */
	}

	.order-item {
		display: flex;
		flex-direction: column;
		padding: 0 25upx;
		background: #fff;
		margin-top: 20upx;

		.i-top {
			display: flex;
			align-items: center;
			height: 80upx;
			font-size: $font-base;
			color: $font-color-dark;
			position: relative;

			.shopIcon {
				width: 28rpx;
				height: 27rpx;
			}

			.shopName {
				margin-left: 9rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				// font-weight:500;
				color: rgba(51, 51, 51, 1);
			}

			.state {
				margin-left: auto;
				font-size: 24rpx;
				font-family: PingFang SC;
				// font-weight:500;
				color: #FE5E49;
			}

			.del-btn {
				padding: 10upx 0 10upx 36upx;
				font-size: $font-lg;
				color: $font-color-light;
				position: relative;

				&:after {
					content: '';
					width: 0;
					height: 30upx;
					border-left: 1px solid $border-color-dark;
					position: absolute;
					left: 20upx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		/* 多条商品 */
		.goods-box {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			position: relative;
			margin-bottom: 30rpx;
			padding: 0 16rpx 0 16rpx;
			width: 698rpx;
			height: 200rpx;
			background: rgba(251, 251, 251, 1);
			// border:1rpx solid rgba(238,238,238,1);
			border-radius: 10rpx;
			border: 1rpx solid rgba(238, 238, 238, 1);

			.goods-item {
				width: 170upx;
				height: 170upx;
				display: inline-block;
				margin-right: 16upx;

				&.hiddenGoods {
					display: none;
				}
			}

			.goods-img {
				display: block;
				width: 100%;
				height: 100%;
			}

			.goodsCount {
				display: flex;
				align-items: center;
				margin-left: auto;
				margin-right: 14rpx;

				.count {
					font-size: 24rpx;
					font-family: PingFang SC;
					// font-weight:500;
					color: rgba(51, 51, 51, 1);
				}

				image.rightBtn {
					margin-left: 9rpx;
					width: 9rpx;
					height: 15rpx;
				}
			}
		}

		/* 单条商品 */
		.goods-box-single {
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			margin-bottom: 30rpx;
			padding: 0 30rpx 0 16rpx;
			width: 698rpx;
			height: 200rpx;
			background: rgba(251, 251, 251, 1);
			border-radius: 10rpx;

			&.borderOneRpx:after {
				border-radius: 10rpx;
				border-color: rgba(238, 238, 238, 1);
			}

			.goods-img {
				display: block;
				width: 170upx;
				height: 170upx;
			}

			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 16rpx 0 16rpx 24rpx;
				height: 170rpx;
				overflow: hidden;

				.title {
					font-size: 24rpx;
					font-family: PingFang SC;
					// font-weight:500;
					color: rgba(51, 51, 51, 1);
					line-height: 34rpx;
				}

				//规格/价格
				.specPrice {
					display: flex;
					align-content: center;
					justify-content: space-between;

					.attr-box {
						max-width: 350rpx;
						// height:19rpx;
						font-size: 20rpx;
						font-family: PingFang SC;
						// font-weight:500;
						color: rgba(153, 153, 153, 1);
						line-height: 22rpx;
					}

					.price {
						font-size: 24rpx;
						color: rgba(51, 51, 51, 1);
						line-height: 22rpx;
					}
				}

				//购买数量
				.buyNum {
					display: flex;
					align-items: center;

					.preGroup {
						font-size: 20rpx;
						color: #7A46DF;
					}

					.NUM {
						margin-left: auto;
						height: 18rpx;
						line-height: 22rpx;
						text-align: right;
						font-size: 24rpx;
						color: #666666;
					}
				}
			}
		}

		.price-box {
			display: flex;
			justify-content: flex-end;
			align-items: baseline;
			padding: 0 0 28rpx 0;
			font-size: 24rpx;
			color: rgba(51, 51, 51, 1);
			line-height: 22rpx;

			.price {
				font-weight: 500;
				font-size: 28rpx;
				color: #FE5E49;

				&:before {
					content: '￥';
					font-size: 28rpx;
					margin: 0 2upx 0 8upx;
				}
			}
		}

		.action-box {
			display: flex;
			justify-content: flex-end;
			position: relative;
		}

		.action-btn {
			margin: 0;
			margin-left: 20upx;
			margin-bottom: 34rpx;
			padding: 0;
			width: 150upx;
			height: 54upx;
			line-height: 54upx;
			text-align: center;
			font-size: 24rpx;
			font-family: PingFang SC;
			color: rgba(102, 102, 102, 1);
			border-radius: 27rpx;
			background: rgba(255, 255, 255, 1);

			&:after {
				border: 1px solid #ADADAD;
				border-radius: 100px;
			}

			&.recom {
				color: rgba(255, 255, 255, 1);
				background: #FE5E49;

				&:after {
					border: none;
				}
			}
		}
	}


	/* 支付密码 */
	.payPassBg-Container {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.7);


		/* 设置密码 */
		.setPass-Container {
			position: fixed;
			bottom: 520rpx;
			width: 600rpx;
			height: 478rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;

			/* 弹窗标题 */
			.modalTitle {
				margin-top: 50rpx;
				margin-bottom: 75rpx;
				width: 100%;
				height: 30rpx;
				line-height: 30rpx;
				text-align: center;
				font-size: 30rpx;
				font-family: PingFang SC;
				// font-weight:bold;
				color: rgba(51, 51, 51, 1);
			}

			/* 关闭按钮 */
			.closeModalBtn {
				z-index: 99999;
				position: absolute;
				top: 36rpx;
				right: 36rpx;
				width: 25rpx;
				height: 24rpx;
			}

			.content {
				position: relative;
				display: flex;
				align-items: flex-start;
				justify-content: center;
				width: 100%;
				height: 90rpx;

				.passwordBg-Container {
					display: flex;
					justify-content: center;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 90rpx;

					.password-bg {
						width: 535rpx;
						height: 90rpx;
					}
				}

				.password-item {
					position: relative;
					width: 90rpx;
					height: 90rpx;
					line-height: 90rpx;
					text-align: center;
					font-size: 60rpx;
					font-family: PingFang;
					color: #333333;

					/* &.borderOneRpx:after {
						border-width: 4rpx;
						border-color: rgba(238,238,238,1);
						border-radius: 5rpx;
					} */
				}
			}

			/* 忘记密码 */
			.forgetPass-Container {
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				bottom: 170rpx;
				width: 100%;

				.forgetPass {
					width: 544rpx;
					height: 40rpx;
					line-height: 70rpx;
					text-align: right;
					font-size: 20rpx;
					font-family: PingFang SC;
					color: #FE5E49;
					line-height: 40rpx;
				}
			}

			/* 确认支付 */
			.confirmPayOuter-Container {
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				bottom: 70rpx;
				width: 100%;
				height: 70rpx;

				.confirmPay-Container {
					width: 544rpx;
					height: 70rpx;
					line-height: 70rpx;
					text-align: center;
					font-size: 28rpx;
					font-family: PingFang SC;
					color: rgba(255, 255, 255, 1);
					background: #FE5E49;
					border-radius: 35rpx;
				}
			}
		}
	}


	//拼团样式
	.poster-Container {
		position: relative;

		.preGroup-NUM {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 38rpx;
			line-height: 38rpx;
			text-align: center;
			font-size: 20rpx;
			color: #FFFFFF;
			background: rgba(122, 70, 223, 0.6);
		}
	}

	.preGroupStatus-Container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 26rpx;
		width: 100%;
		height: 54rpx;
		font-size: 24rpx;
		color: #666666;

		.preGroupStatus {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 100%;

			.preGroupOperate {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 100%;

				.righter {
					width: 150rpx;
					height: 54rpx;
					line-height: 54rpx;
					text-align: center;
					font-size: 24rpx;
					color: #FFFFFF;
					background: #FE5E49;
					border-radius: 27rpx;
				}
			}
		}

		.preGroup-NUM {
			color: #FE5E49;
		}
	}


	//邀请好友
	.inviteFriend-OutContainer {
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 100;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.7);

		.inviteFriend {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-direction: column;
			position: relative;
			padding: 45rpx 0 45rpx 0;
			width: 600rpx;
			height: 448rpx;
			background: rgba(255, 255, 255, 1);
			border-radius: 16rpx;

			.closeModalBtn {
				position: absolute;
				right: 36rpx;
				top: 36rpx;
				width: 24rpx;
				height: 24rpx;
			}

			.dialogTitle {
				font-size: 34rpx;
				color: #333333;
			}

			.tipsText {
				position: absolute;
				top: 100rpx;
				left: 0;
				width: 100%;
				text-align: center;
				font-size: 26rpx;
				color: #666666;

				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;

				&>view {
					display: flex;
					align-items: center;
				}

				.numGroup {
					color: #FE5E49;
				}
			}

			.groupUsers {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 40rpx;
				padding: 0 30rpx;
				width: 100%;
				height: 100rpx;

				.groupedUser {
					width: 100rpx;
					height: 100rpx;
					border: 1rpx solid #FE5E49;
					border-radius: 50%;
				}

				.waitingUser {
					margin-left: 30rpx;
					width: 100rpx;
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					font-size: 60rpx;
					color: #DBDBDB;
					border-radius: 50%;
					border: 1rpx dashed #DBDBDB;
				}
			}

			.iKnowBtn {
				width: 418rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				font-size: 28rpx;
				color: #FFFFFF;
				background: #FE5E49;
				border-radius: 35rpx;
			}
		}


		.endDt-Container {
			display: inline-block;
			align-items: center;
			justify-content: center;
			text-align: center;
			font-size: 26rpx;
			color: #666666;

			.timeText {
				color: #666666;
			}
		}
	}


	// 分享
	.share {
		margin-bottom: 0;
		margin-bottom: calc(constant(safe-area-inset-bottom));
		margin-bottom: calc(env(safe-area-inset-bottom));
		width: 100%;
		height: 486rpx;
		border-radius: 16rpx 16rpx 0 0;
		background-color: white;
		z-index: 1000;
		position: relative;

		.title-name {
			height: 126rpx;
			width: 100%;
			font-size: 30rpx;
			color: #333333;
			font-weight: bold;
		}

		image {
			width: 168rpx;
			height: 16rpx;
			margin: 0 35rpx 0 35rpx;
		}

		.icons {
			width: 690rpx;
			margin: 24rpx auto 0 auto;
			border-bottom: 1rpx solid#eee;
			padding-bottom: 74rpx;

			.icon-block {
				width: 120rpx;
				font-size: 26rpx;
				color: #333333;
				flex-wrap: wrap;

				image {
					flex-shrink: 0;
					width: 110rpx;
					height: 110rpx;
				}

				text {
					margin-top: 24rpx;
				}
			}
		}

		.cancel {
			color: #999999;
			font-size: 30rpx;
			margin-top: 27rpx;
			width: 100%;
			text-align: center;
		}
	}


	/deep/.uni-countdown__number {
		margin: 0;
		width: auto;
		font-size: 26rpx !important;
		color: #666666 !important;
	}

	/deep/.uni-countdown__splitor {
		padding: 0;
		color: #666666 !important;
	}
</style>
